「當你迷惘的時候，就回到原點想一想」-中華一番 蘭飛鴻

前言

網頁前端新手村系列文章，宗旨並不在技術本身的教導，重點放在技術與技術之間的脈胳關係。讓零碎的網頁前端技術的關鍵字，成為比較有系統性的視野。

讓一開始接觸網頁前端的新手們，有一個比較友善的系統來架構你的學習，至於技術本身的深入探討，就留給其它的高手們吧。

從設計載體到RWD顯示原理

從平面設計師聊起

從「和平面設計師合作」的觀點，來看待網頁設計。
可以發現平面設計師對於圖形的「失真變形」、「裁切」與「手機排版」、「桌機排版」之間的變化，並不是很熟悉。

網頁設計看似平面，其實與平面設計最大的不同，是作品的載體[1]改變了。
依「和平面設計師合作」的經驗，平面設計師訓練中，熟悉的排版方式 不考慮數位載體的變形與元素之間的關係。[2]

「以我的刻版印象中的」平面設計師(這樣才不會打翻一船人)在畫面上的思緒，靠著幾種邏輯運作

1. 熟悉的是絕對單位: 是一種可以用尺量得到的單位。像是: pt, cm, m, inch...這種。
2. 對齊: 靠左、靠右、置中以及對齊某條線。
3. 比例分配: 比例尺寸
4. 其它我沒有想到的方式~(哈)

螢幕的 pixel 單位

意思是「平面設計師不了解 px ( pixel )單位的使用」。

因為當不同的設備、螢幕尺寸，尤其是「相同解析度，不同尺寸的螢幕」或者「相同尺寸，不同解析度的螢幕」，會造成切出來的作品跑版。

最主要的原因，是沒有考慮到 pixel 在螢幕成為物理尺寸時，有 pixel pitch 的影響。

以此為原因之一，平面設計師與UI設計師的專業領域是重疊又分離的。

印刷與螢幕

在Photosop的設定上，有個可以設定「印刷精細度」的單位，叫 dpi ( dots per inch )，也就是單位面積中，可以放進的 pt (point) 愈多，看起來的畫面也就愈細緻。(買印表機，就是要看這個唷!!)

在買手機時，有個規格叫 ppi ( pixel pre inch )，也就是單位面積中，可以放進多少個 pixel。
也就是間接的定義了 pixel pitch 和每一個 pixel 的大小。[3]

試想一下，從32吋的電視機到55吋的電視機，解析度都是 1920×1080 的時代，它們是如何辦到的呢？

對網頁來說，作品是以 pixel 為基本單位，但是到物理尺寸，必須要經過 pixel pitch 和 pixel size 的影響，才能被尺量得到。

瀏覽器的渲染解析度？

在設計師要展開設計時，前端工程師要和設計師談一下，手機和桌機，各別要使用什麼尺寸進行設計。而這個尺寸，要以 pixel 為單位。而不是「設計一個 5.5吋的手機和24吋的螢幕」。

來聊聊，要怎麼樣正確的取得解析度。
以iPhone為例，到官網介紹手機的解析度，可以看見它上面標示的解析度，這個規格稱為 native resolution 或 screen resolution ，以下就稱為「原生解析度」一詞。

在 Chrome 的 開發者模式之下，可以模擬成各種手機尺寸的解析度瀏覽方式。但是，卻找不到 1334 × 750 的 iPhone 6，看到的數字是 375 × 667；找不到 1136 × 640 的 iPhone SE(或 iPhone 5)，卻看到 320 × 568。

Chrome模擬出來的解析度，稱之為「渲染解析度」，當然，這不是它的定義，只是用這種方式可以快速的找到它的規格。

渲染解析度

它是透過瀏覽器的渲染，造成的一種解析度尺寸。而網頁的真正載體是瀏覽器。所以要了解瀏覽器如何看待手機尺寸。

上一篇，我們有講到 meta 有一種 name="viewport" 的設定，讓瀏覽器隨設備決定渲染解析度。

讓手機排版上，使用「字會變大」的解析度，瀏覽，又保持細緻的感覺。
也就是說，排版上是吃低解析度的「渲染解析度」，內容呈現上，是吃高解析度的「原生解析度」，就可以達到攻守兼備，有高可讀性，又不會低畫質的手機瀏覽體驗。

換句話說，當你沒有設定好 <meta name="viewport" ...>時，手機瀏覽器也許會使用原生解析度，顯示桌機版排版！

那究竟是精細了多少呢？

讓我們整理一下。

讓我們來算一下
以 iPhone 6 為例
長邊: 1334 = 667 × 2
短邊: 750 = 375 × 2

在桌機版這樣顯示

在手機版這樣顯示

在手機版，把2個pixel 當作1個pixel處理。
用更多的 pixel 呈現「原本要用1個 pixel 的內容」達到內容更細緻的效果

參考資料

[1]: [But 桑專欄] 科技始終來自於人性‧字體始終取決於載體 (上)
[2]: 給尺寸稿
[3]: Pixel density - wiki
[4]: 如何取得手機版面的設計解析度